﻿@page "/dividers"

<h3>Divider 分割线</h3>

<h4>区隔内容的分割线。</h4>

<Block Title="基础用法" Introduction="对不同章节的文本段落进行分割。">
    <p>青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</p>
    <Divider></Divider>
    <p>少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉</p>
</Block>

<Block Title="设置文案" Introduction="可以在分割线上自定义文案内容。">
    <p>头上一片晴天，心中一个想念</p>
    <Divider Text="少年包青天" Alignment="Alignment.Left"></Divider>
    <p>其实归来之时，断剑重铸之日</p>
    <Divider Text="英雄联盟"></Divider>
    <p>一只萌萌哒图标</p>
    <Divider Text="学习语录" Alignment="Alignment.Right"></Divider>
    <p>学习使我快乐</p>
</Block>

<Block Title="设置图标" Introduction="可以在分割线上自定义文案内容。">
    <p>头上一片晴天，心中一个想念</p>
    <Divider Icon="fa fa-fw fa-at" Alignment="Alignment.Left"></Divider>
    <p>其实归来之时，断剑重铸之日</p>
    <Divider Icon="fa fa-fw fa-bar-chart"></Divider>
    <p>一只萌萌哒图标</p>
    <Divider Icon="fa fa-fw fa-bookmark" Text="书签" Alignment="Alignment.Right"></Divider>
    <p>学习使我快乐</p>
</Block>

<Block Title="垂直分割" Introduction="进行垂直显示分割线">
    <div class="d-flex">
        <span>雨纷纷</span>
        <Divider IsVertical="true"></Divider>
        <span>旧故里</span>
        <Divider IsVertical="true"></Divider>
        <span>草木深</span>
    </div>
    <Divider Text="分割线"></Divider>
    <div class="d-flex">
        <div class="border border-primary" style="width:100px; height:100px;"></div>
        <Divider IsVertical="true"></Divider>
        <div class="border border-success" style="width:100px; height:100px;"></div>
        <Divider IsVertical="true"></Divider>
        <div class="border border-info" style="width:100px; height:100px;"></div>
    </div>
    <Divider Text="分割线"></Divider>
    <div class="d-flex">
        <div class="border border-primary" style="width:100px; height:200px;"></div>
        <Divider IsVertical="true" Text="分割线"></Divider>
        <div class="border border-success" style="width:100px; height:200px;"></div>
        <Divider IsVertical="true" Text="分割线"></Divider>
        <div class="border border-info" style="width:100px; height:200px;"></div>
    </div>
</Block>

<Block Title="自定义内容" Introduction="通过设置 <code>ChildContent</code> 内容可以自定义任意内容">
    <p>头上一片晴天，心中一个想念</p>
    <Divider>
        <div class="text-dagner">我是自定义内容 <code>div</code> 元素</div>
    </Divider>
    <p>其实归来之时，断剑重铸之日</p>
</Block>

<AttributeTable Items="@GetAttributes()" />
